{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>

    <!-- 页面右上角导航栏 -->
    <div class="navbar" id="navbar">
        <div class="btn-group">
            <a href="/main/home/" class="nav-link">首页</a>
            <a href="/main/about/" class="nav-link">简介</a>
            <a href="/main/works/" class="nav-link">作品</a>
            <a href="/main/board/" class="nav-link">留言板</a>
        </div>
    </div>


    <!-- 侧边栏部分：头像和简介 -->
    <div class="sidebar-container" id="sidebar">
        <div class="sidebar">
            <div class="profile-container" style="background-color: #e1f8e1; padding: 20px; border-radius: 10px;">
                <img src="{% static 'images/yinzhibo.jpg' %}" alt="尹智博" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;"/>
                <div class="profile-info">
                    <h3>尹智博</h3>
                    <p>Ethan/根号二/藏獒</p>
                    <p>DOB：2002.01.01 摩羯座</p>
                    <p>MBTI：INFJ</p>
                    <p>2020年毕业于上海戏剧学院20届音乐剧系</p>
                    <p>海底捞忠实粉丝</p>
                    <p>创意调酒师 吉他歌手 背包客 氛围摄影 艺术疗愈探索者</p>
                </div>
            </div>
        </div>
        <div id="sidebar-toggle" class="sidebar-toggle">
            <span>&#9654;</span> <!-- 右箭头 -->
        </div>
    </div>

    <!-- 页面内容 -->
    <div class="container-fluid">
        <div class="row">
            <!-- 主内容部分 -->
            <div class="col-10 main-content" id="main-content">
                <!-- 新月排期框 -->
                <div class="schedule-box">
                    <div class="schedule-header">
                        <h2>新月排期</h2>
                    </div>
                    <div class="schedule-img">
                        <img src="{% static 'images/schedule.jpg' %}" alt="排期图" class="img-fluid">
                    </div>
                    <p class="source-text">图片来源：wb@小黄惊天动地吃拉面</p>
                </div>

                <!-- 最新资讯 -->
                <div class="latest-news mt-5">
                    <h2>最新资讯</h2>
                    <div class="news-list">
                        <div class="news-item">
                            <p>《灯塔》出海：<a href="https://weibo.com/6641891098/5083694995866337" target="_blank">黎明会照亮你尚未知晓的世界</a></p>
                        </div>
                        <div class="news-item">
                            <p>音乐剧星图：<a href="https://weibo.com/7530686565/5068867028912712">顺利首演</a></p>
                        </div>
                        <div class="news-item">
                            <p>「海神Challenge！」第十期：<a href="https://weibo.com/6641891098/4900332302504542">接力绘画手舞足蹈</a></p>
                        </div>
                        {% comment %} <div class="news-item">
                            <p>采访4: 简要内容，<a href="#">点击阅读更多</a></p>
                        </div> {% endcomment %}
                    </div>
                </div>

                <!-- 页面底部 -->
                <footer class="mt-5">
                    <p style="text-align: center;">web made by @StarsX3日报</p>
                </footer>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap 和自定义 JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 控制侧边栏的显示与隐藏
        const sidebar = document.getElementById("sidebar");
        const mainContent = document.getElementById("main-content");
        const toggle = document.getElementById("sidebar-toggle");

        // 初始化：侧边栏默认是显示的
        sidebar.style.left = "0px";  // 设置侧边栏初始为显示状态
        mainContent.style.transition = "margin-left 0.3s ease";  // 主内容右移过渡效果
        mainContent.style.marginLeft = "250px";  // 默认主内容右移 250px

        // 点击箭头切换侧边栏的显示与隐藏
        toggle.addEventListener("click", function () {
            if (sidebar.style.left === "0px") {
                // 隐藏侧边栏
                sidebar.style.left = "-250px";  // 侧边栏移动到左边隐藏
                mainContent.style.marginLeft = "0"; // 主内容恢复原位
                toggle.innerHTML = "&#9654;";  // 显示右箭头

                // 隐藏侧边栏时，箭头按钮移动到最左侧
                toggle.classList.add("move-left");
            } else {
                // 显示侧边栏
                sidebar.style.left = "0";  // 侧边栏回到默认显示位置
                mainContent.style.marginLeft = "250px"; // 主内容右移
                toggle.innerHTML = "&#9664;";  // 显示左箭头

                // 显示侧边栏时，箭头按钮返回到右侧
                toggle.classList.remove("move-left");
            }
        });
    </script>

    <script>
        // 获取导航栏元素
        const navbar = document.getElementById('navbar');
    
        // 当前滚动位置
        let lastScrollTop = 0;
    
        // 监听滚动事件
        window.addEventListener('scroll', function() {
            let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    
            // 如果滚动超过 100px 且滚动方向是向下
            if (currentScroll > 100) {
                // 如果当前滚动位置大于之前的位置，则隐藏导航栏
                if (currentScroll > lastScrollTop) {
                    navbar.style.top = "-70px";  // 隐藏导航栏（可以调整 -70px 根据你的导航栏高度）
                } else {
                    navbar.style.top = "10px";  // 显示导航栏
                }
            } else {
                navbar.style.top = "10px";  // 页面在顶部时，显示导航栏
            }
    
            // 更新滚动位置
            lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
        });
    </script>
    

</body>
</html>
